<template>
  <div class="dynamic-table-group">
    <div class="group-header">
      <h3>{{ group.groupName }}</h3>
      <div class="group-info">
        <el-tag size="mini" type="danger">动态表格</el-tag>
        <span class="table-info">{{ tableData.length }} 行 × {{ group.paramItems.length }} 列</span>
      </div>
    </div>
    
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        size="small"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
      >
        <!-- 序号列 -->
        <el-table-column
          label="序号"
          type="index"
          width="60"
          align="center"
        />
        
        <!-- 参数字段列 -->
        <el-table-column
          v-for="param in sortedParams"
          :key="param.paramId"
          :label="getColumnLabel(param)"
          :width="param.columnWidth || 120"
          align="center"
        >
          <template #default="scope">
            <!-- 多测次参数 -->
            <div v-if="param.isMultiMeasure" class="multi-measure-cells">
              <div
                v-for="(measure, index) in scope.row[param.paramCode]"
                :key="index"
                class="measure-cell"
              >
                <el-input-number
                  v-if="param.dataType === 'number'"
                  v-model="scope.row[param.paramCode][index]"
                  :precision="param.precision"
                  size="mini"
                  controls-position="right"
                  @change="handleCellChange(scope.$index, param.paramCode, index)"
                />
                <el-input
                  v-else
                  v-model="scope.row[param.paramCode][index]"
                  size="mini"
                  @change="handleCellChange(scope.$index, param.paramCode, index)"
                />
              </div>
            </div>
            
            <!-- 单值参数 -->
            <div v-else>
              <el-input-number
                v-if="param.dataType === 'number' && param.paramType === 'base'"
                v-model="scope.row[param.paramCode]"
                :precision="param.precision"
                size="mini"
                controls-position="right"
                @change="handleCellChange(scope.$index, param.paramCode)"
              />
              <el-input
                v-else-if="param.dataType === 'text' && param.paramType === 'base'"
                v-model="scope.row[param.paramCode]"
                size="mini"
                @change="handleCellChange(scope.$index, param.paramCode)"
              />
              
              <!-- 计算参数（只读） -->
              <div v-else-if="param.paramType === 'calculation'" class="calculated-cell">
                {{ formatCalculatedValue(scope.row[param.paramCode], param.precision) }}
                <el-tooltip :content="param.calculationExpr" placement="top">
                  <i class="el-icon-info calculation-icon"></i>
                </el-tooltip>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <div class="table-footer">
      <div class="table-stats">
        <span>共 {{ tableData.length }} 行数据</span>
        <span v-if="multiMeasureParams.length > 0" class="multi-measure-info">
          ({{ multiMeasureParams.map(p => p.paramName).join(', ') }} 为多测次参数)
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicTableGroup',
  props: {
    group: {
      type: Object,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  },
  computed: {
    sortedParams() {
      return [...this.group.paramItems].sort((a, b) => a.sortOrder - b.sortOrder)
    },
    multiMeasureParams() {
      return this.group.paramItems.filter(param => param.isMultiMeasure)
    }
  },
  methods: {
    getColumnLabel(param) {
      let label = param.paramName
      if (param.unit) {
        label += ` (${param.unit})`
      }
      if (param.isMultiMeasure) {
        label += ` [${param.multiMeasureCount}次]`
      }
      if (param.paramType === 'calculation') {
        label += ' ⚡'
      }
      return label
    },
    
    handleCellChange(rowIndex, paramCode, measureIndex = null) {
      const value = measureIndex !== null 
        ? this.tableData[rowIndex][paramCode][measureIndex]
        : this.tableData[rowIndex][paramCode]
      
      this.$emit('table-change', {
        groupId: this.group.groupId,
        rowIndex,
        paramCode,
        value
      })
    },
    
    formatCalculatedValue(value, precision) {
      if (value === null || value === undefined) return '-'
      if (typeof value === 'number' && precision !== undefined) {
        return value.toFixed(precision)
      }
      return value
    }
  }
}
</script>

<style scoped>
.dynamic-table-group {
  padding: 20px 30px;
  background: white;
}

.group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e6e8eb;
}

.group-header h3 {
  margin: 0;
  color: #303133;
  font-size: 16px;
}

.group-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-info {
  color: #909399;
  font-size: 12px;
}

.table-container {
  margin-bottom: 15px;
}

.multi-measure-cells {
  display: flex;
  gap: 5px;
  justify-content: center;
}

.measure-cell {
  flex: 1;
  min-width: 60px;
}

.calculated-cell {
  padding: 5px;
  background: #f0f9ff;
  border: 1px solid #d9ecff;
  border-radius: 3px;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.calculation-icon {
  color: #409eff;
  cursor: help;
  font-size: 12px;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e6e8eb;
}

.table-stats {
  color: #909399;
  font-size: 12px;
}

.multi-measure-info {
  color: #e6a23c;
  margin-left: 10px;
}
</style>